<template>
  <el-form
    ref="dataForm"
    :model="roadBase"
    label-position="top"
  >
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item :rules="rules" label="道路名称" prop="roadName">
          <el-input v-model="roadBase.roadName" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :rules="rules" label="通行方向" prop="roadDirection">
          <el-input v-model="roadBase.roadDirection" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item :rules="rules" label="起点" prop="startPoint">
          <el-input v-model="roadBase.startPoint" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :rules="rules" label="终点" prop="endPoint">
          <el-input v-model="roadBase.endPoint" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item :rules="rules" label="设计单位" prop="designUnit">
          <el-input v-model="roadBase.designUnit" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :rules="rules" label="建造单位" prop="constructionUnit">
          <el-input v-model="roadBase.constructionUnit" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item :rules="rules" label="道路类型" prop="roadTypeID">
          <el-select v-model="roadBase.roadTypeID" placeholder="请选择" prop="damageType" required>
            <el-option
              v-for="item in typeOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :rules="rules" label="道路等级" prop="roadLevel">
          <el-input v-model="roadBase.roadLevel" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item :rules="rules" label="设计速度" prop="designedSpeed">
          <el-input v-model="roadBase.designedSpeed" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :rules="rules" label="宽度范围" prop="roadWidthRange">
          <el-input v-model="roadBase.roadWidthRange" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item :rules="rules" label="道路长度" prop="roadLength">
          <el-input v-model="roadBase.roadLength" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :rules="rules" label="道路面积" prop="roadArea">
          <el-input v-model="roadBase.roadArea" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item :rules="rules" label="交通等级" prop="trafficLevel">
          <el-input v-model="roadBase.trafficLevel" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :rules="rules" label="所属乡镇" prop="township">
          <el-input v-model="roadBase.township" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item :rules="rules" label="管理分类" prop="managementClassification">
          <el-input v-model="roadBase.managementClassification" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :rules="rules" label="管理单位" prop="managementUnit">
          <el-input v-model="roadBase.managementUnit" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item :rules="rules" label="养护单位" prop="maintenanceUnit">
          <el-input v-model="roadBase.maintenanceUnit" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :rules="rules" label="建造年月" prop="constructionDate">
          <el-date-picker
            v-model="roadBase.constructionDate"
            type="date"
            placeholder="选择日期时间"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item :rules="rules" label="aadt" prop="aadt">
          <el-input v-model="roadBase.aadt" />
        </el-form-item>
      </el-col>

    </el-row>

  </el-form>
</template>

<script>
export default {
  name: 'RoadBase',
  props: { roadBase: {
    type: Object,
    default() {
      return {}
    }
  }},
  data() {
    return {
      rules: {
        required: true, message: '请输入信息'
      },
      typeOption: [{
        value: 1,
        label: '快速路'
      }, {
        value: 2,
        label: '主干路'
      }, {
        value: 3,
        label: '广场'
      }, {
        value: 4,
        label: '商业繁华街道'
      }, {
        value: 5,
        label: '重要生产区道路'
      }, {
        value: 6,
        label: '外事活动路线'
      }, {
        value: 7,
        label: '游览路线'
      }, {
        value: 8,
        label: '次干路'
      }, {
        value: 9,
        label: '步行街'
      }, {
        value: 10,
        label: '支路中的商业街道'
      }, {
        value: 11,
        label: '其他支路'
      }]
    }
  }
}
</script>

